<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
            <page-search>
                <page-search-column class="tab-column">
                    <el-tabs class="theme-gray" v-model="activeName" @tab-click="getTable">
                        <el-tab-pane name="1">
                            <div slot="label" class="el-tab__label">进行中</div>
                        </el-tab-pane>
                        <el-tab-pane name="2">
                            <div slot="label" class="el-tab__label">已完成</div>
                        </el-tab-pane>
                    </el-tabs>
                </page-search-column>
            </page-search>
        </template>
        <div class="task-manage-container">
            <el-table
                v-show="tableData.length"
                class="pbb__table"
                header-cell-class-name="pbb__table-thead"
                cell-class-name="pbb__table-thead-cell"
                row-class-name="pbb__table-thead-row"
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="60">
                </el-table-column>
<!--                <el-table-column-->
<!--                    prop="govName"-->
<!--                    label="所在地区">-->
<!--                </el-table-column>-->
                <el-table-column
                    prop="name"
                    label="任务名称">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="发布时间">
                </el-table-column>
                <el-table-column
                    prop="departmentName"
                    label="经办人部门">
                    <template slot-scope="scope">
                        {{scope.row.departmentName || "-"}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="assignee"
                    label="当前经办人">
                    <template slot-scope="scope">
                        {{scope.row.assignee || "-"}}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="完成状态">
                    <template slot-scope="scope">
                        {{scope.row.status | getStatus}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="detailRow(scope.row)">查看</el-button>
<!--                        <el-button size="mini" type="text" @click="showStart(scope.row)">设置开始任务</el-button>-->
<!--                        <el-button size="mini" type="text" @click="deleteRow(scope.row)">删除</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <ask-empty-text
                style="min-height: 400px;"
                v-if="tableData.length === 0">
            </ask-empty-text>
        </div>
        <el-dialog
            title="开始任务"
            :close-on-click-modal="false"
            :visible.sync="showStartDialog"
            width="40%">
            <el-form ref="startForm" :model="startTaskForm" :rules="startRules">
                <el-form-item label="发布时间" prop="time">
                    <el-date-picker
                        v-model="startTaskForm.time"
                        type="daterange"
                        clearable
                        value-format="yyyy-MM-dd"
                        range-separator="~"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="expireTimeOption">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeStartDialog">取消</el-button>
                <el-button type="primary" @click="toSubmitStart">确认</el-button>
            </div>
        </el-dialog>
        <template v-slot:footer v-if="total > 0">
            <pagination :total="total" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="getTable"/>
        </template>
    </page-box>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";

@Component({
    name: "TaskManageNotAlive",
    filters: {
        getStatus(val: number) {
            switch (val) {
            case 2:
                return "已完成";
            case 1:
                return "进行中";
            }
        }
    }
})
export default class TaskManage extends Vue {
    activeName = "1"
    form: any = {
        // 验收内容
        remark: "",
        radio: 3,
        keyword: ""
    }

    // 类型切换
    checkType = "1"
    // 表头搜索
    tableForm = {
        createTime: "",
        name: "",
        taskClass: "",
        status: ""
    }

    // 类型对应的数量
    typeNumber = {
        all: 0,
        mine: 0,
        received: 0,
        myForward: 0
    }

    // 数据总数
    total = 0;
    // 每页数量
    pageSize = 10;
    // 当前页码
    pageIndex = 1;
    // 表格数据
    tableData = []

    select: any = []

    nowId = ""

    searchForm: any = {
        time: "",
        finishState: "",
        status: ""
    }

    // 显示开始任务弹框
    showStartDialog = false
    startTaskForm: any = {
        time: [],
        sendRangeList: []
    }

    expireTimeOption = {
        disabledDate(date: any) {
            return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
        }
    }

    startRules = {
        time: [
            { required: true, message: '请选择时间', trigger: 'blur' }
        ]
    }

    @Watch('$route', { immediate: true, deep: true })
    routeChange() {
        const name = this.$route.name || "";
        if (["TaskManageMine", "TaskManageReceive"].includes(name)) {
            this.initPage();
        }
    }

    created() {
        this.initPage();
    }

    initPage() {
        this.checkType = this.$route.name === "TaskManageMine" ? "1" : "2";
        this.getTable();
    }

    // 查询表格
    async getTable() {
        // const { time, status } = this.searchForm;
        const res = await this.$server["task/getTable"]({
            data: {
                // startTime: time ? time[0] : "",
                // endTime: time ? time[1] : "",
                status: parseInt(this.activeName),
                taskKind: this.checkType,
                pageSize: this.pageSize,
                currentPage: this.pageIndex
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 显示开始任务弹框
    showStart(row: any) {
        this.showStartDialog = true;
        this.nowId = row.id;
        if (row.finishTime) {
            this.startTaskForm.time = [row.startTime, row.finishTime];
        } else {
            this.startTaskForm.time = [];
        }
    }

    // 关闭开始任务弹框
    closeStartDialog() {
        (this.$refs.startForm as any).resetFields();
        this.showStartDialog = false;
        this.nowId = "";
    }

    // 提交开始任务
    toSubmitStart() {
        (this.$refs.startForm as any).validate(async(valid: any) => {
            if (valid) {
                const { time } = this.startTaskForm;
                const res = await this.$server["task/update"]({
                    data: {
                        finishTime: time[1] + " 23:59:59",
                        id: this.nowId,
                        startTime: time[0] + " 00:00:00",
                        status: 0
                    }
                });
                if (res.data.code === 200) {
                    this.closeStartDialog();
                    this.$message.success("操作成功!");
                    this.initPage();
                } else {
                    this.$message.error(res.data.message || "接口请求错误!");
                }
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    }

    // 删除
    deleteRow(row: any) {
        this.$confirm("如果删除将丢失已填写数据，是否确认删除?", '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async() => {
            const res = await this.$server["task/delete"]({
                data: {
                    id: row.id
                }
            });
            if (res.data.code === 200) {
                this.$message.success("操作成功!");
                this.initPage();
            } else {
                this.$message.error(res.data.message || "接口请求错误!");
            }
        });
    }

    // 查看
    detailRow(row: any) {
        this.$router.push({
            name: "TownCreatedAndReceivedDetailList",
            query: {
                formId: row.formId,
                name: row.name,
                comment: row.comment,
                status: row.status,
                description: row.description,
                id: row.id,
                checkType: this.checkType,
                assigneeId: row.assigneeId
            }
        });
    }
}
</script>
<style lang="scss">
.task-manage-container {
    .check-type {
        margin-bottom: 20px;
        .el-radio-button {
            .el-radio-button__inner {
                min-width: 120px;
            }
        }
    }
    .table-head-date {
        width: 140px!important;
    }
}
.acceptance-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 10px;
    .label {
        margin-right: 20px;
        line-height: 36px;
    }
    .right {
        p {
            margin: 5px 0 10px 0;
        }
    }
}
.QR-code-img {
    display: block;
    width: 172px;
    height: 172px;
    margin: 30px auto;
}
</style>
